<template>
    <div>
        <van-nav-bar
        left-arrow
        fixed
        placeholder
        z-index="3"
        :title="cinemaName"
        safe-area-inset-top
        @click-left="onClickLeft"
        :border="false"
        />
    <div v-if="cinemaData">
        <div class="c_name">{{cinemaData.name}}</div>
        <div class="c_services">
            <span v-for="item in cinemaData.services" :key="item">{{item.name}}</span>
        </div>
        <van-nav-bar :title="cinemaData.address"  :border="false">
            <template #left>
               <van-icon name="location-o" class="a_left" size="20" />
            </template>
            <template #right>
               <van-icon name="phone-o" class="a_right" size="20"/>
            </template>
    </van-nav-bar>
    </div>
    <div class="swiper" v-if="filmData">
         <van-image
        :src="filmData[filmIndex].poster"
        fit="cover"
       class="blur"
      />
     <swiper effect="coverflow" :slides-per-view="3" centered-slides :space-between="10"  slide-to-clicked-slide
     :coverflow-effect='{rotate: 0,stretch: -10,depth: 100,modifier: 6,slideShadows : false}'
      @slideChange="onSlideChange"
      class="swiper"
      >
    <swiper-slide class="s_item" v-for="item in filmData" :key="item.filmId">
        <img :src="item.poster" :alt="item.name">
    </swiper-slide>
  </swiper>
  </div>
    <div class="film" v-if="filmData" @click="handleOnClick(filmData[filmIndex].filmId)">
        <div class="f_name">
            {{filmData[filmIndex].name}}
            <span>{{filmData[filmIndex].grade}}分</span>
        </div>
        <div class="f_title">
            {{filmData[filmIndex].category}}
           丨{{filmData[filmIndex].runtime}}分钟
           丨{{filmData[filmIndex].director}}
           丨{{Actors(filmData[filmIndex].actors)}}
        </div>
        <van-icon name="arrow" size="15" class="right"/>
    </div>
      <van-tabs v-model:active="active" v-if="filmData" animated swipeable @click="ChangSchedulesData">
        <van-tab :title="item" v-for="item in filmDate()" :key="item.films">
        <div  v-if="schedules">
          <div v-for="item in schedules" :key="item" class="schedules">
             <div class="time">
                <div class="show_time">{{DateTime(item.showAt)}}</div>
                <div class="end_time">{{DateTime(item.endAt)}}散场</div>
             </div>
             <div class="F_I">
                <div class="filmLanguage">{{item.filmLanguage+item.imagery}}</div>
                <div class="hallName">{{item.hallName}}</div>
             </div>
             <div class="buy">
             <div class="minSalePrice">￥{{item.minSalePrice/100}}</div>
            <van-button color="#ff4e32" plain  size="mini">&nbsp;购票&nbsp; </van-button>
            </div>
          </div>
        </div>
          <div v-else>
            <van-empty description="暂无影片" />
          </div>
        </van-tab>
    </van-tabs>
    </div>
</template>
<script>
import axios from 'axios'
import SwiperCore, { EffectCoverflow } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/swiper.scss'
import 'swiper/components/effect-coverflow/effect-coverflow.scss'

SwiperCore.use([EffectCoverflow])
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      cinemaData: null,
      filmData: null,
      cinemaName: '',
      filmIndex: 0,
      active: 0,
      schedules: null
    }
  },
  beforeMount () {
    this.$store.commit('ToggleTabbarShow', false)
  },
  beforeUnmountn () {
    this.$store.commit('ToggleTabbarShow', true)
    window.onscroll = null
  },
  methods: {
    onSlideChange (swiper) {
      this.filmIndex = swiper.activeIndex
      this.getSchedules()
    },
    onClickLeft () {
      this.$store.commit('ToggleTabbarShow', true)
      this.$router.push(`${this.$route.params.location ? this.$route.params.location : '/'}`)
    },
    handleOnScroll () {
      if (document.documentElement.scrollTop >= 54) {
        this.cinemaName = this.cinemaData.name
      } else {
        this.cinemaName = ''
      }
    },
    handleOnClick (id) {
      this.$router.push({ name: 'detial', params: { id: id, location: window.location.pathname } })
    },
    getSchedules () {
      axios({
        url: ` https://m.maizuo.com/gateway/?filmId=${this.filmData[this.filmIndex].filmId}&cinemaId=${this.$route.params.id}&date=${this.filmData[this.filmIndex].showDate[this.active]}`,
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16151016671203561505488897","bc":"110100"}',
          'X-Host': 'mall.film-ticket.schedule.list'
        }
      }).then(res => {
        this.schedules = res.data.data.schedules ? res.data.data.schedules : null
      })
    },
    ChangSchedulesData () {
      this.getSchedules()
    }
  },
  mounted () {
    axios({
      url: `https://m.maizuo.com/gateway/?cinemaId=${this.$route.params.id}`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16151016671203561505488897","bc":"110100"}',
        'X-Host': 'mall.film-ticket.cinema.info'
      }
    }).then(res => {
      this.cinemaData = res.data.data.cinema
    })
    axios({
      url: `https://m.maizuo.com/gateway/?cinemaId=${this.$route.params.id}`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16151016671203561505488897","bc":"110100"}',
        'X-Host': 'mall.film-ticket.film.cinema-show-film'
      }
    }).then(res => {
      console.log(res.data)
      this.filmData = res.data.data.films
      this.$nextTick(() => {
        this.getSchedules()
      })
    })
    window.onscroll = this.handleOnScroll
  },
  computed: {
    Actors () {
      return (data) => {
        let actorName = ''
        data.forEach(item => {
          actorName += item.name + ' '
        })
        return actorName
      }
    },
    filmDate () {
      return () => {
        var arr = []
        this.filmData[this.filmIndex].showDate.forEach(item => {
          var str = ''
          var date = new Date(item * 1000)
          var nowDate = new Date()
          var Nd = nowDate.getDate()
          var m = date.getMonth() + 1 // 月
          var d = date.getDate() // 日
          switch (d - Nd) {
            case 0:
              str += '今天'
              break
            case 1:
              str += '明天'
              break
            case 2:
              str += '后天'
              break
            default:
              break
          }
          m = m >= 10 ? m : '0' + m
          d = d >= 10 ? d : '0' + d
          arr.push(str + m + '月' + d + '日')
        })
        return arr
      }
    },
    DateTime () {
      return data => {
        var date = new Date(data * 1000)
        var h = date.getHours() + 1
        var m = date.getMinutes() + 1 // 月
        m = m >= 10 ? m : '0' + m
        h = h >= 10 ? h : '0' + h
        return h + ':' + m
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.c_name{
    width: 100%;
    margin-top: 10px;
    font-size: 18px;
    text-align: center;
}
.c_services{
    width: 100%;
    text-align: center;
    margin: 15px 0;
    span{
        color: #ffb232;
        padding: 2px 5px;
        margin-right: 4px;
        border:1px solid #ffb232;
        font-size: 12px;
    }
}
.swiper{
    position: relative;
    height: 150px;
    width: 100%;
    overflow: hidden;
    .blur{
        position: absolute;
        z-index: 0;
        width: 100%;
         height: 150px;
         filter: blur(20px);
    }
    .s_item{
    height: 150px;
    width: 100px;
    text-align: center;
    background-color: #eee;
    img{
        width: 100%;
        height: 100%;
    }
    }
}
.film{
    width: 100%;
    position: relative;
    .f_name{
        width: 100%;
        text-align: center;
        font-size: 18px;
        margin-top: 10px;
        span{
            color:  #ffb232;
            font-size: 16px;
            font-style: italic;
        }
    }
    .f_title{
        width: 78%;
        margin: 0 auto;
        font-size: 14px;
        color: #666;
        overflow: hidden;/*超出部分隐藏*/
        white-space: nowrap;/*不换行*/
        text-overflow:ellipsis;/*超出部分文字以...显示*/
        margin-top: 10px;
    }
    .right{
        position: absolute;
        right: 20px;
        top: 20px;
    }
}
.schedules{
  display: flex;
  padding: 15px;
  align-items: center;
  font-size: 15px;
  border-bottom: 1px solid #eee;
  .time{
    flex: 2;
    .end_time{
      font-size: 13px;
      color: #666;
      margin-top: 5px;
    }
  }
  .F_I{
    flex: 6;
    padding-left:10px;
    .hallName{
       margin-top: 5px;
      font-size: 13px;
      color: #666;
       width: 223px;
       overflow: hidden;/*超出部分隐藏*/
       white-space: nowrap;/*不换行*/
       text-overflow:ellipsis;/*超出部分文字以...显示*/
    }
  }
  .buy{
    flex: 3;
    display: flex;
    justify-content: space-between;
    .minSalePrice{
      color: #ff4e32;
    }
  }
}
.a_left{
    margin-left: 40px;
}
.a_right{
    margin-right: 40px;
}
</style>
